﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>编辑系统设置</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>系统设置</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="配置信息" name="info">
                    <div class="tab-content">
                        <el-form ref="editForm" :model="model" :rules="rules" :label-position="labelPosition" label-width="120px">
                            <el-form-item prop="regStatus" label="注册设置">
                                <el-select v-model="model.regStatus" placeholder="请选择...">
                                    <el-option label="开放注册" :value="0"></el-option>
                                    <el-option label="关闭注册" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="regVerify" label="注册审核">
                                <el-radio-group v-model="model.regVerify">
                                    <el-radio-button label="0">无须审核</el-radio-button>
                                    <el-radio-button label="1">人工审核</el-radio-button>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item prop="regCtrl" label="IP注册间隔">
                                <el-input v-model="model.regCtrl" placeholder="必填，IP注册间隔限制0不限制(小时)">
                                    <template slot="append">小时</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="regCodeCtrl" label="验证码间隔">
                                <el-input v-model="model.regCodeCtrl" placeholder="必填，获取验证码间隔限制(分钟)">
                                    <template slot="append">分钟</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="regCodeLength" label="验证码长度">
                                <el-input v-model="model.regCodeLength" placeholder="必填，验证码生成位数">
                                    <template slot="append">位数</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="regSmsExpired" label="验证码有效期">
                                <el-input v-model="model.regSmsExpired" placeholder="必填，手机验证码有效期">
                                    <template slot="append">分钟</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="regEmailExpired" label="邮件有效期">
                                <el-input v-model="model.regEmailExpired" placeholder="必填，邮件链接有效期">
                                    <template slot="append">天</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="pointCashRate" label="积分兑换比例">
                                <el-input v-model="model.pointCashRate" placeholder="0为禁用兑换功能">
                                    <template slot="append">积分/1元</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="pointLoginNum" label="每天登录积分">
                                <el-input v-model="model.pointLoginNum" placeholder="必填，积分值为正整数">
                                    <template slot="append">积分</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="regKeywords" label="用户名保留">
                                <el-input v-model="model.regKeywords" placeholder="必填，用户名保留关健字"></el-input>
                            </el-form-item>
                            <el-form-item prop="regMsgStatus" label="欢迎短信息">
                                <el-select v-model="model.regMsgStatus" placeholder="请选择...">
                                    <el-option label="不发送" :value="0"></el-option>
                                    <el-option label="站内消息" :value="1"></el-option>
                                    <el-option label="邮件消息" :value="2"></el-option>
                                    <el-option label="手机短信" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="regMsgTxt" label="短信息内容">
                                <el-input type="textarea" :rows="3" v-model="model.regMsgTxt" placeholder="必填，500字符内"></el-input>
                            </el-form-item>
                            <el-form-item label="注册许可协议">
                                <el-switch :active-value="1" :inactive-value="0" v-model="model.regRules"></el-switch>
                            </el-form-item>
                            <el-form-item prop="regRulesTxt" label="许可协议内容">
                                <el-input type="textarea" :rows="5" v-model="model.regRulesTxt" placeholder="必填，支持HTML"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="footer-box">
            <div class="footer-btn">
                <el-button type="primary" @@click="submitForm">确认保存</el-button>
                <el-button plain @@click="resetForm">取消返回</el-button>
            </div>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/babel-polyfill/polyfill.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                activeName: 'info',//当前选项卡
                labelPosition: 'right',//表单对齐方式
                model: {
                    regStatus: 0,
                    regVerify: 0,
                    regMsgStatus: 0,
                    regMsgTxt: null,
                    regKeywords: null,
                    regCtrl: 0,
                    regCodeCtrl: 0,
                    regCodeLength: 0,
                    regSmsExpired: 0,
                    regEmailExpired: 0,
                    regRules: 0,
                    regRulesTxt: null,
                    pointCashRate: 0,
                    pointLoginNum: 0
                },
                rules: {
                    regStatus: [
                        { required: true, message: '注册设置不可为空', trigger: 'blur' }
                    ],
                    regVerify: [
                            { required: true, message: '注册审核不可为空', trigger: 'blur' }
                    ],
                    regMsgStatus: [
                        { required: true, message: '欢迎消息不可为空', trigger: 'blur' }
                    ],
                    regMsgTxt: [{
                        required: true, message: '短消息内容不可为空', trigger: 'blur'
                    }],
                    regKeywords: [
                        { required: true, message: '用户名保留关健字不可为空', trigger: 'blur' }
                    ],
                    regCtrl: [
                        { required: true, message: '注册间隔限制不可为空', trigger: 'blur' },
                        { pattern: /^[+]{0,1}(\d+)$/, message: '只能输入正整数', trigger: 'blur' }
                    ],
                    regCodeCtrl: [
                        { required: true, message: '验证码间隔限制不可为空', trigger: 'blur' },
                        { pattern: /^[+]{0,1}(\d+)$/, message: '只能输入正整数', trigger: 'blur' }
                    ],
                    regCodeLength: [
                        { required: true, message: '验证码长度不可为空', trigger: 'blur' },
                        { pattern: /^[+]{0,1}(\d+)$/, message: '只能输入正整数', trigger: 'blur' }
                    ],
                    regSmsExpired: [
                        { required: true, message: '验证码有效期不可为空', trigger: 'blur' },
                        { pattern: /^[+]{0,1}(\d+)$/, message: '只能输入正整数', trigger: 'blur' }
                    ],
                    regEmailExpired: [
                        { required: true, message: '邮件有效期不可为空', trigger: 'blur' },
                        { pattern: /^[+]{0,1}(\d+)$/, message: '只能输入正整数', trigger: 'blur' }
                    ],
                    pointCashRate: [
                        { required: true, message: '现金积分兑换比例不可为空', trigger: 'blur' },
                        { pattern: /^[+]{0,1}(\d+)$/, message: '只能输入正整数', trigger: 'blur' }
                    ],
                    pointLoginNum: [
                        { required: true, message: '每天登录积分不可为空', trigger: 'blur' },
                        { pattern: /^[+]{0,1}(\d+)$/, message: '只能输入正整数', trigger: 'blur' }
                    ]
                }
            },
            methods: {
                //初始化数据
                initData: function () {
                    let _this = this; //当前页面
                    AxiosAjax({
                        url: '/setting/memberconfig',
                        loading: true,
                        success: function (res) {
                            //赋值给model
                            Object.keys(_this.model).forEach(key => { _this.model[key] = res.data[key] });
                        }
                    });
                },
                submitForm: function () {
                    let _this = this; //当前页面
                    //多个表单验证
                    const f1 = new Promise((resolve, reject) => {
                        _this.$refs['editForm'].validate((valid) => {
                            if (valid) resolve()
                        });
                    });
                    Promise.all([f1]).then(() => {
                        AxiosAjax({
                            method: 'put',
                            url: '/setting/memberconfig',
                            data: _this.model,
                            loading: true,
                            successMsg: '会员设置已修改成功',
                            success: function (res) {
                                //可写回调处理
                            }
                        });
                    })
                },
                resetForm() {
                    window.history.back(-1);
                }
            },
            created: function () {
                //初始化数据
                this.initData();
            }
        })
    </script>
</body>
</html>
